@use 'sass:math';
@use './variables.scss' as *;

/* 引入外部CSS */
@import 'normalize.css';

/* 基础样式设置 */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 
               Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 
               'Microsoft Yahei', sans-serif;
  font-size: $font-size-md;
  color: $text-color;
  background-color: $background-color;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: $primary-color;
  text-decoration: none;
}

.container {
  max-width: 750px;
  margin: 0 auto;
  padding: 0 $padding-md;
}

.page-container {
  min-height: 100vh;
  background-color: $background-color;
  padding-bottom: 50px;
}

/* 文本溢出省略号 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 清除浮动 */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* 常用边距类 */
.mt-sm { margin-top: $padding-sm; }
.mt-md { margin-top: $padding-md; }
.mt-lg { margin-top: $padding-lg; }

.mb-sm { margin-bottom: $padding-sm; }
.mb-md { margin-bottom: $padding-md; }
.mb-lg { margin-bottom: $padding-lg; }

.ml-sm { margin-left: $padding-sm; }
.ml-md { margin-left: $padding-md; }
.ml-lg { margin-left: $padding-lg; }

.mr-sm { margin-right: $padding-sm; }
.mr-md { margin-right: $padding-md; }
.mr-lg { margin-right: $padding-lg; }

/* 常用flex类 */
.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-1 {
  flex: 1;
}

/* 颜色与背景类 */
.text-primary { color: $primary-color; }
.text-success { color: $success-color; }
.text-warning { color: $warning-color; }
.text-danger { color: $danger-color; }
.text-light { color: $text-color-light; }

.bg-white { background-color: $white; }
.bg-primary { background-color: $primary-color; }
.bg-success { background-color: $success-color; }
.bg-warning { background-color: $warning-color; }
.bg-danger { background-color: $danger-color; } 